{% extends 'baykeshop/user/userinfo.html' %}

{% load shop_tags %}

{% block title %}我的订单{% endblock %}

{% block userinfo_content %}
    <div class="box is-radiusless mb-3">
        <h1 class="is-size-4">我的订单</h1>
        <div class="dropdown-divider"></div>

        <div class="tabs is-boxed is-fullwidth">
            <ul>
                <li class="{% if 'status' not in request.get_full_path or status == '' %} is-active {% endif %}" ><a href="{% url 'baykeshop:order_list' %}">全部订单</a></li>
                <li class="{% if 'status=1' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:order_list' %}?status=1">待支付</a></li>
                <li class="{% if 'status=2' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:order_list' %}?status=2">待发货</a></li>
                <li class="{% if 'status=3' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:order_list' %}?status=3">待收货</a></li>
                <li class="{% if 'status=4' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:order_list' %}?status=4">待评价</a></li>
                <li class="{% if 'status=5' in request.get_full_path %} is-active {% endif %}"><a href="{% url 'baykeshop:order_list' %}?status=5">已完成</a></li>
            </ul>
        </div>
        
        {% for order in page_obj %}
        <div class="box has-background-light is-shadowless">
        <div class="is-flex is-justify-content-space-between">
            <div class=" has-text-grey-light1">订单日期：{{ order.add_date }}</div>
            <div class=" has-text-danger-dark">
                {{ order.get_pay_status_display }}
            </div>
        </div>
        <div class="dropdown-divider"></div>
        {% for osku in order.baykeshopordersku_set.all %}
        <div class="is-flex is-justify-content-space-between">
            <div>
                <figure class=" image is-128x128">
                    <img src="{{ osku.sku.cover_pic.url }}" alt="{{ osku.title }}" srcset="">
                </figure>
            </div>
            <div class="has-background-danger1 is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 pl-3 pr-3">
                <h1 class="has-text-weight-bold">{{ osku.title }}</h1>
                {% if osku.spec %}<p class="has-text-grey-light">{{ osku.spec }}</p>{% endif %}
            </div>
            <div class="has-background-danger1 is-flex is-justify-content-center is-align-items-center">
                <p class="has-text-danger-dark">¥ {{ osku.price }} x {{ osku.count }}</p>
            </div>
        </div>
        <div class=" dropdown-divider"></div>
        {% endfor %}

        <div class="">
            {% is_order_commented order as is_commented %}
            <p class=" has-text-weight-bold pt-1 pb-1 has-text-right">共{% order_num order.baykeshopordersku_set.all %}件商品，总金额{{ order.total_amount }}元（含运费）</p>
            <div class=" buttons is-justify-content-end">
                {% if order.pay_status == 1 %}
                    <a class="button is-primary is-small" href="{% url 'baykeshop:order_detail' order.order_sn %}">立即支付</a>
                {% elif order.pay_status == 3 %}
                    <form action="" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="order_sn" value="{{ order.order_sn }}">
                        <button class="button is-primary is-small" type="submit">确认收货</button>
                    </form>
                {% elif order.pay_status == 4 and not is_commented %}
                    <a class=" button is-primary is-small" href="{% url 'baykeshop:comments_create' order.order_sn %}">立即评价</a>
                {% endif %}
                <a href="{% url 'baykeshop:user_order_detail' order.order_sn %}" class="button is-small">订单详情</a>
            </div>
        </div>

        </div>
        {% empty %}
        <p class=" has-text-danger has-text-centered pt-6 pb-6">还没有相关订单信息哦！</p>
        {% endfor %}

        {% if page_obj %}
        <nav class="pagination is-centered1 is-small" role="navigation" aria-label="pagination">
            {% if page_obj.has_previous %}
            <a class="pagination-previous" href="?page={{ page_obj.previous_page_number }}&status={{ status }}">Previous</a>
            {% endif %}
            {% if page_obj.has_next %}
            <a class="pagination-next" href="?page={{ page_obj.next_page_number }}&status={{ status }}">Next page</a>
            {% endif %}
            <ul class="pagination-list">
                {% for p in page_obj.paginator.get_elided_page_range %}
                    {% if p != '...' %}
                    <li><a href="?page={{ p }}&status={{ status }}" class="pagination-link {% if page_obj.number == p %} is-current {% endif %}" {% if page_obj.number == p %}aria-current="page"{% endif %} aria-label="Goto page {{ p }}">{{ p }}</a></li>
                    {% else %}
                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                    {% endif %}
                {% endfor %}
            </ul>
        </nav>
        {% endif %}
    </div>
{% endblock %}
    
    